<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
       .left{
           width: 200px;
           height: 500px;
 position: relative;
       }
       li{
           height: 40px;
           width: 200px;
           border: 1px solid #000;
          
       }
       .show{
           height: 400px;
           width: 600px;
           border: 1px solid #000;
           position: absolute;
           left: 200px;
           display: none;
           z-index: 999;
           top: 0px;
           left: 240px;
       }
       .show > span{

       }
     </style>
    <script src="node_modules//jquery/dist/jquery.js"></script>
    </head>
    <body>

        <div class="left">
              <ul>
                  <li>xxxx1
                      <div class="show">
                           
                      </div>
                  </li>
                  <li>xxxx2
                          <div class="show">
                           
                      </div>
                  </li>
                  <li>xxxx3
                          <div class="show">
                           
                      </div>
                  </li>
                  <li>xxxx4</li>
                  <li>xxxx5</li>
              </ul>
        </div>
    
    </body>
</html>
<script>
    $(function(){


        $(".left").on("mouseleave",function(){
            $(".show").hide().empty();


        })

        $("li").on("mouseenter",function(){
            $(this).children("div").show().parent("li").siblings("li").children("div").hide();

             var index=$(this).index();

            $.ajax({
                url:"data/data.json",
                type:"get",
                success:function(res){
                
                    var data=res[index];
                
                    $(".show").empty().siblings().hide();
        
                    for(var i=0;i<data["title"+(index+1)].length;i++){
                      $(".show").append($("<span>"+data["title"+(index+1)][i]+" | </span>"));
                    }
                     

                }

            })
        })
    })
</script>